<template>
    <div>
        <div class="list" v-if="dataSource" v-loading="loading">
            <div class="item"
                @click="goDetail(item)" 
                v-for="item in dataSource.list" 
                :key="item.id">
                <div class="imgbox">
                    <img :alt="item.title" v-src="{src:item.coverImg,width:300,height:200}">
                </div>
                <div class="contentWrap">
                    <p class="title">{{item.title}}</p>
                    <p class="info">{{item.createDate.substr(0,10)}} / {{item.sourceName}} / {{item.authorName}}</p>
                    <p class="content">	{{item.content}}</p>
                    <p class="tag">阅读全文 >></p>
                </div>
            </div>
            <!-- @size-change="handleSizeChange"
            @current-change="handleCurrentChange" -->
        </div>
        <div class="pageWrap" v-if="dataSource && dataSource.total">
                            <!-- :current-page.sync="currentPage3" -->
            <el-pagination
                :page-size="10"
                @current-change="pageChange"
                :current-page="dataSource.pageNum"
                layout="prev, pager, next, jumper"
                :total="dataSource.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from '@/request.js';
    export default {
        data(){
            return {
                dataSource:null,
                page:1
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            getData(){
                const {type} = this.$route.params;
                if(!type) return;
                //请求新闻接口
                this.loading = true;
                request.get(`/pc/news/findNewsList/${type}?page=${this.page}`)
                .then(res=> {
                    this.loading = false;
                    this.dataSource = res.data;
                })
            },
            goDetail(item){
                const {type} = this.$route.params;
                this.$router.push(`/news/information/${type}/detail?id=${item.id}`)
            },
            pageChange(page){
                this.page = page;
                this.getData();
            }
        },
        watch:{
            "$route":function(newV) {
                this.getData();
            }
        }
    }
</script>

<style lang="less" scoped>
.list {
    padding-bottom: 20px;
    padding-right: 36px;
    border-bottom: 1px solid #E5E5E5;
    min-height: 400px;
}
.pageWrap {
    padding-top: 20px;
    text-align: center;
    margin-bottom: 100px;
}
.item {
    display: flex;
    text-align: left;
    align-items: center;
    height: 200px;
    overflow: hidden;
    margin-bottom: 30px;
    max-width: 100%;
    box-sizing: border-box;
    .imgbox {
        flex: 0 0 300px;
        overflow: hidden;
        height: 100%;
        &>img {
            height: 200px;
            position: relative;
        }
    }
    .contentWrap {
        flex: 1;
        max-width: 500px;
        padding-left: 20px;
        padding-top: 0;
        overflow: hidden;
        .title {
            font-size:20px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
        }
        .info {
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:24px;
            margin-top: 17px;
        }
        .content {
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:28px;
            height: 42px;
            margin-top: 26px;
        }
        .tag {
            font-size:12px;
            font-weight:400;
            text-decoration:underline;
            color:rgba(244,37,37,1);
            line-height:24px;
            margin-top: 25px;
            cursor: pointer;
        }
    }
}
</style>